import React, { Component } from 'react'
import { Layout, Menu, Icon } from 'antd'
import { withRouter } from 'react-router-dom'
import AdminHeader from './header'
import './frame.less'

const { SubMenu } = Menu
const { Content, Sider } = Layout

@withRouter

class Frame extends Component {

  componentDidMount() {
    console.log('frame:', this.props)
  }
  

  onMenuClick = ({ item, key, keyPath, domEvent }) => {
    // console.log({ item, key, keyPath, domEvent })
    console.log('Frame props', this.props)
    this.props.history.push(key)
  }

  render() {
    // console.log(this.props)
    const selectedKeyArr = this.props.location.pathname.split('/')
    selectedKeyArr.length = 3
    console.log(selectedKeyArr)

    const bgColor = '#b0bec5'

    return (
      <Layout style={{ height: '100vh' }}>
        <AdminHeader />
        <Layout>
          <Sider width={160} >
            <Menu
              mode="inline"
              selectedKeys={[selectedKeyArr.join('/')]}
              onClick={this.onMenuClick}
              style={{ height: '100%', borderRight: 0, background: bgColor }}
            >
            {
              this.props.menus.map(item => {
                return (
                  item.children && item.children.length > 0
                  ?
                  <SubMenu
                    key={item.pathname+"_submenu"}
                    title={
                      <span>
                        <Icon type={item.icon} />
                        <span>{item.title}</span>
                      </span>
                    }
                  >
                    {
                      item.children.map(sub => {
                        return (
                          <Menu.Item key={sub.pathname}>
                            {sub.title}
                          </Menu.Item>
                        )
                      })
                    }
                  </SubMenu>
                  :
                  <Menu.Item key={item.pathname}>
                    <Icon type={item.icon} />
                    {item.title}
                  </Menu.Item>
                )
              })
            }
            </Menu>
          </Sider>
          <Layout>
            <Content style={{ background: '#fff', margin: 0 }} >
              {this.props.children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    )
  }
}

export default Frame